<template>
  <el-container class="h-full">
    <el-main style="--el-main-padding: 0">
      <div class="z-9 w-full overflow-hidden border-sky-400 border h-full">
        <MapContainer v-show="switchComponents.showComponent" />
        <VideoContainer v-show="!switchComponents.showComponent" />
      </div>
    </el-main>
    <el-footer style="--el-footer-padding: 0" class="mt-2" height="25vh">
      <div class="border-sky-400 border h-full">
        <FooterContainer />
      </div>
      <!-- <el-button class="w-full" size="large" @click="detailDrawerVisible = true">
        <Icon icon="mdi:arrow-drop-up" class="text-3xl" />
      </el-button> -->
    </el-footer>
  </el-container>
</template>

<script setup lang="ts">
import FooterContainer from '@/components/FooterContainer.vue'
import MapContainer from '@/components/MapContainer'
import VideoContainer from '@/components/VideoContainer'
import { useSwitchComponents } from '@/stores/switchComponents'
const switchComponents = useSwitchComponents()
</script>
